<template>
  <a-card class="general-card" title="已做题目">
    <template #title>
      <div class="card-header">
        <icon-code-square-fill class="card-icon" />
        <span class="card-title">已做题目</span>
      </div>
    </template>
    <template #extra>
      <a-link>查看所有</a-link>
    </template>
    <a-spin :loading="loading">
      <a-result
        v-if="problemList.length === 0"
        status="404"
        class="empty-result"
      >
        <template #subtitle>暂无已做题目数据</template>
        <template #extra>
          <a-button type="primary" @click="goToProblems">去刷题</a-button>
        </template>
      </a-result>

      <div v-else class="problem-list">
        <a-list :data="problemList">
          <template #item="{ item }">
            <a-list-item class="problem-item" @click="viewProblem(item)">
              <div class="problem-info">
                <div class="title">{{ item.title }}</div>
                <a-tag
                  v-if="item.status === 3 || item.status === 2"
                  color="green"
                  size="small"
                >
                  通过
                </a-tag>
                <a-tag v-else color="red" size="small">未通过</a-tag>
              </div>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </a-spin>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store';
import { OjProblemSubmitService } from '@/api/gen-api/services/OjProblemSubmitService';
import { Message } from '@arco-design/web-vue';

const router = useRouter();
const userStore = useUserStore();
const loading = ref(false);
const problemList = ref<any[]>([]);

// 获取用户已做题目列表
const fetchUserProblems = async () => {
  loading.value = true;
  try {
    const userId = userStore.id;
    if (!userId) {
      loading.value = false;
      return;
    }

    // 构建请求参数，只需要简单的提交记录，不需要详细代码
    const paging = { pageNum: 1, pageSize: 10 };
    const queryRequest = {};

    const response = await OjProblemSubmitService.pageInfoByUserId(
      userId,
      paging,
      queryRequest
    );

    if (response.code === 200 && response.result && response.result.records) {
      // 处理数据，去重并只保留需要的字段
      const uniqueProblems = new Map();
      response.result.records.forEach(record => {
        if (!uniqueProblems.has(record.questionId)) {
          uniqueProblems.set(record.questionId, {
            id: record.questionId,
            title: record.title || `题目 #${record.questionId}`,
            status: record.status || 0,
            createTime: record.createTime
          });
        }
      });

      // 转换成数组并按时间排序
      problemList.value = Array.from(uniqueProblems.values()).sort(
        (a, b) =>
          new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
      );

      console.log('已加载用户做过的题目:', problemList.value);
    }
  } catch (error) {
    console.error('获取已做题目失败:', error);
    Message.error('获取已做题目失败，请刷新重试');
  } finally {
    loading.value = false;
  }
};

// 跳转到题目详情页面
const viewProblem = problem => {
  router.push({
    name: 'ProblemDetail',
    params: { problemId: problem.id }
  });
};

const goToProblems = () => {
  router.push({
    name: 'FindProblem'
  });
};

onMounted(() => {
  fetchUserProblems();
});
</script>

<style scoped lang="less">
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-icon {
  color: #2759cd;
  font-size: 18px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-1);
}

.empty-result {
  padding: 30px 0;

  :deep(.arco-result-subtitle) {
    margin-bottom: 20px;
    color: var(--color-text-3);
  }

  :deep(.arco-btn-primary) {
    background-color: #2759cd;
    border-color: #2759cd;
    transition: all 0.3s ease;

    &:hover {
      background-color: #3769dd;
      border-color: #3769dd;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(39, 89, 205, 0.2);
    }
  }
}

.problem-list {
  margin: 0 -16px;

  :deep(.arco-list-content) {
    padding: 0;
  }

  .problem-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background-color: rgba(39, 89, 205, 0.05);
      transform: translateY(-2px);
    }

    .problem-info {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        font-weight: 500;
        color: var(--color-text-1);
        transition: color 0.2s ease;
      }

      .arco-tag {
        margin-left: 12px;
      }
    }

    &:hover .title {
      color: #2759cd;
    }
  }
}
</style>
